<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Adomx - Responsive Bootstrap 4 Admin Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">

    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/vendor/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/vendor/themify-icons.css">
    <link rel="stylesheet" href="assets/css/vendor/cryptocurrency-icons.css">

    <!-- Plugins CSS -->
    <link rel="stylesheet" href="assets/css/plugins/plugins.css">

    <!-- Helper CSS -->
    <link rel="stylesheet" href="assets/css/helper.css">

    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Custom Style CSS Only For Demo Purpose -->
    <link id="cus-style" rel="stylesheet" href="assets/css/style-primary.css">

</head>

<body>

    <div class="main-wrapper">


        <!-- Header Section Start -->
        <div class="header-section">
            <div class="container-fluid">
                <div class="row justify-content-between align-items-center">

                    <!-- Header Logo (Header Left) Start -->
                    <div class="header-logo col-auto">
                        <a href="index.html">
                            <img src="assets/images/logo/logo.png" alt="">
                            <img src="assets/images/logo/logo-light.png" class="logo-light" alt="">
                        </a>
                    </div><!-- Header Logo (Header Left) End -->

                    <!-- Header Right Start -->
                    <div class="header-right flex-grow-1 col-auto">
                        <div class="row justify-content-between align-items-center">

                            <!-- Side Header Toggle & Search Start -->
                            <div class="col-auto">
                                <div class="row align-items-center">

                                    <!--Side Header Toggle-->
                                    <div class="col-auto"><button class="side-header-toggle"><i class="zmdi zmdi-menu"></i></button></div>

                                    <!--Header Search-->
                                    <div class="col-auto">

                                        <div class="header-search">

                                            <button class="header-search-open d-block d-xl-none"><i class="zmdi zmdi-search"></i></button>

                                            <div class="header-search-form">
                                                <form action="#">
                                                    <input type="text" placeholder="Search Here">
                                                    <button><i class="zmdi zmdi-search"></i></button>
                                                </form>
                                                <button class="header-search-close d-block d-xl-none"><i class="zmdi zmdi-close"></i></button>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div><!-- Side Header Toggle & Search End -->

                            <!-- Header Notifications Area Start -->
                            <div class="col-auto">

                                <ul class="header-notification-area">

                                    <!--Language-->
                                    <li class="adomx-dropdown position-relative col-auto">
                                        <a class="toggle" href="#"><img class="lang-flag" src="assets/images/flags/flag-1.jpg" alt=""><i class="zmdi zmdi-caret-down drop-arrow"></i></a>

                                        <!-- Dropdown -->
                                        <ul class="adomx-dropdown-menu dropdown-menu-language">
                                            <li><a href="#"><img src="assets/images/flags/flag-1.jpg" alt=""> English</a></li>
                                            <li><a href="#"><img src="assets/images/flags/flag-2.jpg" alt=""> Japanese</a></li>
                                            <li><a href="#"><img src="assets/images/flags/flag-3.jpg" alt=""> Spanish </a></li>
                                            <li><a href="#"><img src="assets/images/flags/flag-4.jpg" alt=""> Germany</a></li>
                                        </ul>

                                    </li>

                                    <!--Mail-->
                                    <li class="adomx-dropdown col-auto">
                                        <a class="toggle" href="#"><i class="zmdi zmdi-email-open"></i><span class="badge"></span></a>

                                        <!-- Dropdown -->
                                        <div class="adomx-dropdown-menu dropdown-menu-mail">
                                            <div class="head">
                                                <h4 class="title">You have 3 new mail.</h4>
                                            </div>
                                            <div class="body custom-scroll">
                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            <div class="image"><img src="assets/images/avatar/avatar-2.jpg" alt=""></div>
                                                            <div class="content">
                                                                <h6>Sub: New Account</h6>
                                                                <p>There are many variations of passages of Lorem Ipsum available. </p>
                                                            </div>
                                                            <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="image"><img src="assets/images/avatar/avatar-1.jpg" alt=""></div>
                                                            <div class="content">
                                                                <h6>Sub: Mail Support</h6>
                                                                <p>There are many variations of passages of Lorem Ipsum available. </p>
                                                            </div>
                                                            <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="image"><img src="assets/images/avatar/avatar-2.jpg" alt=""></div>
                                                            <div class="content">
                                                                <h6>Sub: Product inquiry</h6>
                                                                <p>There are many variations of passages of Lorem Ipsum available. </p>
                                                            </div>
                                                            <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="image"><img src="assets/images/avatar/avatar-1.jpg" alt=""></div>
                                                            <div class="content">
                                                                <h6>Sub: Mail Support</h6>
                                                                <p>There are many variations of passages of Lorem Ipsum available. </p>
                                                            </div>
                                                            <span class="reply"><i class="zmdi zmdi-mail-reply"></i></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                    </li>

                                    <!--Notification-->
                                    <li class="adomx-dropdown col-auto">
                                        <a class="toggle" href="#"><i class="zmdi zmdi-notifications"></i><span class="badge"></span></a>

                                        <!-- Dropdown -->
                                        <div class="adomx-dropdown-menu dropdown-menu-notifications">
                                            <div class="head">
                                                <h5 class="title">You have 4 new notification.</h5>
                                            </div>
                                            <div class="body custom-scroll">
                                                <ul>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-notifications-none"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-block"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-info-outline"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-shield-security"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-notifications-none"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-block"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-info-outline"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="zmdi zmdi-shield-security"></i>
                                                            <p>There are many variations of pages available.</p>
                                                            <span>11.00 am   Today</span>
                                                        </a>
                                                        <button class="delete"><i class="zmdi zmdi-close-circle-o"></i></button>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="footer">
                                                <a href="#" class="view-all">view all</a>
                                            </div>
                                        </div>

                                    </li>

                                    <!--User-->
                                    <li class="adomx-dropdown col-auto">
                                        <a class="toggle" href="#">
                                            <span class="user">
                                        <span class="avatar">
                                            <img src="assets/images/avatar/avatar-1.jpg" alt="">
                                            <span class="status"></span>
                                            </span>
                                            <span class="name">Madison Howard</span>
                                            </span>
                                        </a>

                                        <!-- Dropdown -->
                                        <div class="adomx-dropdown-menu dropdown-menu-user">
                                            <div class="head">
                                                <h5 class="name"><a href="#">Madison Howard</a></h5>
                                                <a class="mail" href="#">mailnam@mail.com</a>
                                            </div>
                                            <div class="body">
                                                <ul>
                                                    <li><a href="#"><i class="zmdi zmdi-account"></i>Profile</a></li>
                                                    <li><a href="#"><i class="zmdi zmdi-email-open"></i>Inbox</a></li>
                                                    <li><a href="#"><i class="zmdi zmdi-wallpaper"></i>Activity</a></li>
                                                </ul>
                                                <ul>
                                                    <li><a href="#"><i class="zmdi zmdi-settings"></i>Setting</a></li>
                                                    <li><a href="#"><i class="zmdi zmdi-lock-open"></i>Sing out</a></li>
                                                </ul>
                                                <ul>
                                                    <li><a href="#"><i class="zmdi zmdi-paypal"></i>Payment</a></li>
                                                    <li><a href="#"><i class="zmdi zmdi-google-pages"></i>Invoice</a></li>
                                                </ul>
                                            </div>
                                        </div>

                                    </li>

                                </ul>

                            </div><!-- Header Notifications Area End -->

                        </div>
                    </div><!-- Header Right End -->

                </div>
            </div>
        </div><!-- Header Section End -->
        <!-- Side Header Start -->
        <div class="side-header show">
            <button class="side-header-close"><i class="zmdi zmdi-close"></i></button>
            <!-- Side Header Inner Start -->
            <div class="side-header-inner custom-scroll">

                <nav class="side-header-menu" id="side-header-menu">
                    <ul>
                        <li class="has-sub-menu"><a href="#"><i class="ti-home"></i> <span>Dashboard</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="index.html"><span>E-commerce (Default)</span></a></li>
                                <li><a href="index-crypto.html"><span>Cryptocurrency</span></a></li>
                            </ul>
                        </li>
                        <li><a href="widgets.html"><i class="ti-palette"></i> <span>Widgets</span></a></li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-package"></i> <span>Basic Elements</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="elements-alerts.html"><span>Alerts</span></a></li>
                                <li><a href="elements-accordions.html"><span>Accordions</span></a></li>
                                <li><a href="elements-avatar.html"><span>Avatar</span></a></li>
                                <li><a href="elements-badge.html"><span>Badge</span></a></li>
                                <li><a href="elements-buttons.html"><span>Buttons</span></a></li>
                                <li><a href="elements-carousel.html"><span>Carousel</span></a></li>
                                <li><a href="elements-dropdown.html"><span>Dropdown</span></a></li>
                                <li><a href="elements-list-group.html"><span>List Group</span></a></li>
                                <li><a href="elements-media.html"><span>Media</span></a></li>
                                <li><a href="elements-modal.html"><span>Modal</span></a></li>
                                <li><a href="elements-pagination.html"><span>Pagination</span></a></li>
                                <li><a href="elements-progress.html"><span>Progress Bar</span></a></li>
                                <li><a href="elements-spinners.html"><span>Spinners</span></a></li>
                                <li><a href="elements-tabs.html"><span>Tabs</span></a></li>
                                <li><a href="elements-tooltip.html"><span>Tooltip</span></a></li>
                                <li><a href="elements-typography.html"><span>Typography</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-crown"></i> <span>Advance Elements</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="elements-clipboard.html"><span>Clipboard</span></a></li>
                                <li><a href="elements-fullcalendar.html"><span>Full Calendar</span></a></li>
                                <li><a href="elements-media-player.html"><span>Media Player</span></a></li>
                                <li><a href="elements-sortable.html"><span>Sortable (Drag&Drop)</span></a></li>
                                <li><a href="elements-toastr.html"><span>Toastr</span></a></li>
                                <li><a href="elements-rating.html"><span>Rating</span></a></li>
                                <li><a href="elements-sweetalert.html"><span>Sweet Alert</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-stamp"></i> <span>Icons</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="icons-cryptocurrency.html"><span>Cryptocurrency</span></a></li>
                                <li><a href="icons-fontawesome.html"><span>Font Awesome</span></a></li>
                                <li><a href="icons-material.html"><span>Material Icon</span></a></li>
                                <li><a href="icons-themify.html"><span>Themify Icon</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-notepad"></i> <span>Forms</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="form-basic-elements.html"><span>Basic Elements</span></a></li>
                                <li><a href="form-checkbox.html"><span>Checkbox</span></a></li>
                                <li><a href="form-date-mask.html"><span>Date & Mask</span></a></li>
                                <li><a href="form-editor.html"><span>Editor</span></a></li>
                                <li><a href="form-file-upload.html"><span>File Upload</span></a></li>
                                <li><a href="form-layout.html"><span>Layout</span></a></li>
                                <li><a href="form-radio.html"><span>Radio</span></a></li>
                                <li><a href="form-range-slider.html"><span>Range Slider</span></a></li>
                                <li><a href="form-selects.html"><span>Selects</span></a></li>
                                <li><a href="form-switchers.html"><span>Switchers</span></a></li>
                                <li><a href="form-wizard.html"><span>Wizard</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-layout"></i> <span>Table</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="table-basic.html"><span>Basic</span></a></li>
                                <li><a href="table-data-table.html"><span>Data Table</span></a></li>
                                <li><a href="table-footable.html"><span>Footable</span></a></li>
                                <li><a href="table-jsgrid.html"><span>Jsgrid</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-pie-chart"></i> <span>Charts</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="chart-chartjs.html"><span>ChartJs</span></a></li>
                                <li><a href="chart-echarts.html"><span>Echarts</span></a></li>
                                <li><a href="chart-google.html"><span>Google Chart</span></a></li>
                                <li><a href="chart-morris.html"><span>Morris  Chart</span></a></li>
                                <li><a href="chart-sparkline.html"><span>Sparkline  Chart</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-map"></i> <span>Maps</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="map-vector.html"><span>Vector Map</span></a></li>
                                <li><a href="map-google.html"><span>Google Map</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-shopping-cart"></i> <span>E-commerce</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="add-product.html"><span>Add Product</span></a></li>
                                <li><a href="edit-product.html"><span>Edit Product</span></a></li>
                                <li><a href="invoice-list.html"><span>Invoice List</span></a></li>
                                <li><a href="invoice-details.html"><span>Invoice Details</span></a></li>
                                <li><a href="order-list.html"><span>Order List</span></a></li>
                                <li><a href="order-details.html"><span>Order Details</span></a></li>
                                <li><a href="manage-products.html"><span>Manage Products</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-gift"></i> <span>Apps</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="chat.html"><span>Chat</span></a></li>
                                <li><a href="mail.html"><span>Mail</span></a></li>
                                <li><a href="single-mail.html"><span>Single Mail</span></a></li>
                                <li><a href="todo-list.html"><span>Todo List</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-lock"></i> <span>Authentication</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="login.html"><span>login</span></a></li>
                                <li><a href="register.html"><span>register</span></a></li>
                                <li><a href="author-profile.html"><span>Profile</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub-menu"><a href="#"><i class="ti-layers"></i> <span>Pages</span></a>
                            <ul class="side-header-sub-menu">
                                <li><a href="blank.html"><span>Blank</span></a></li>
                                <li><a href="timeline.html"><span>Timeline</span></a></li>
                                <li><a href="pricing.html"><span>Pricing</span></a></li>
                                <li><a href="error-1.html"><span>error-1</span></a></li>
                                <li><a href="error-2.html"><span>error-2</span></a></li>
                            </ul>
                        </li>

                    </ul>
                </nav>

            </div><!-- Side Header Inner End -->
        </div><!-- Side Header End -->

        <!-- Content Body Start -->
        <div class="content-body">

            <!-- Page Headings Start -->
            <div class="row justify-content-between align-items-center mb-10">

                <!-- Page Heading Start -->
                <div class="col-12 col-lg-auto mb-20">
                    <div class="page-heading">
                        <h3>Dashboard <span>/ App - Single Mail</span></h3>
                    </div>
                </div><!-- Page Heading End -->

            </div><!-- Page Headings End -->

            <!--Mail Wrapper Start-->
            <div class="mail-wrapper">

                <!--Mail Menu Start-->
                <div class="mail-menu">
                    <button class="button-compose-mail button button-danger button-round" data-toggle="modal" data-target="#modal-compose-mail">Compose Mail</button>
                    <ul>
                        <li><a href="#"><i class="zmdi zmdi-email-open"></i> Inbox</a></li>
                        <li><a href="#"><i class="zmdi zmdi-mail-send"></i> Send</a></li>
                        <li><a href="#"><i class="zmdi zmdi-file"></i> Draft</a></li>
                        <li><a href="#"><i class="zmdi zmdi-cloud-done"></i> Outbox</a></li>
                        <li><a href="#"><i class="zmdi zmdi-star"></i> Stared</a></li>
                        <li><a href="#"><i class="zmdi zmdi-comments"></i> Chats</a></li>
                        <li><a href="#"><i class="zmdi zmdi-block"></i> Spam</a></li>
                        <li><a href="#"><i class="zmdi zmdi-delete"></i> Trash</a></li>
                        <li><a href="#"><i class="zmdi zmdi-plus-circle"></i> Creat New</a></li>
                    </ul>
                </div>
                <!--Mail Menu End-->

                <!--Mail List Container Start-->
                <div class="mail-container">

                    <!--Mail Options Start-->
                    <div class="mail-options">

                        <div class="mail-options-group">
                            <div class="adomx-dropdown">
                                <button class="mail-button-filter toggle"><i class="zmdi zmdi-filter-list"></i></button>
                                <ul class="adomx-dropdown-menu">
                                    <li><a href="#">All</a></li>
                                    <li><a href="#">None</a></li>
                                    <li><a href="#">Read</a></li>
                                    <li><a href="#">Unread</a></li>
                                    <li><a href="#">Starred</a></li>
                                    <li><a href="#">Unstarred</a></li>
                                </ul>
                            </div>
                            <button class="mail-button-reply"><i class="zmdi zmdi-mail-reply"></i></button>
                            <button class="mail-button-refresh"><i class="zmdi zmdi-replay"></i></button>
                        </div>

                        <div class="mail-options-group">
                            <button class="mail-button-starred"><i class="zmdi zmdi-star-outline"></i></button>
                            <button class="mail-button-archive"><i class="zmdi zmdi-archive"></i></button>
                            <div class="adomx-dropdown">
                                <button class="mail-button-category toggle"><i class="zmdi zmdi-folder"></i></button>
                                <ul class="adomx-dropdown-menu">
                                    <li><span>Move to:</span></li>
                                    <li>
                                        <hr>
                                    </li>
                                    <li class="checked"><a href="#"><i class="check"></i> Forwarded</a></li>
                                    <li><a href="#"><i class="check"></i> Replied</a></li>
                                    <li><a href="#"><i class="check"></i> Social</a></li>
                                    <li><a href="#"><i class="check"></i> Forums</a></li>
                                    <li><a href="#"><i class="check"></i> Promotions</a></li>
                                    <li>
                                        <hr>
                                    </li>
                                    <li><a href="#">Spam</a></li>
                                    <li><a href="#">Trash</a></li>
                                    <li>
                                        <hr>
                                    </li>
                                    <li><a href="#">Create New</a></li>
                                    <li><a href="#">Manage Folder</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="mail-options-group">
                            <button class="mail-button-delete"><i class="zmdi zmdi-delete"></i></button>
                            <div class="adomx-dropdown">
                                <button class="mail-button-snooze toggle"><i class="zmdi zmdi-alarm-snooze"></i></button>
                                <ul class="adomx-dropdown-menu">
                                    <li><span>Snooze ultil..</span></li>
                                    <li class="checked"><a href="#">Later today <span class="ml-auto">6:00 PM</span></a></li>
                                    <li class="checked"><a href="#">Tomorrow <span class="ml-auto">8:00 AM</span></a></li>
                                    <li class="checked"><a href="#">Next week <span class="ml-auto">8:00 AM</span></a></li>
                                    <li class="checked"><a href="#">Next weekend <span class="ml-auto">8:00 AM</span></a></li>
                                    <li>
                                        <hr>
                                    </li>
                                    <li><a href="#"><i class="zmdi zmdi-calendar"></i> Pick date & time</a></li>
                                </ul>
                            </div>
                            <div class="adomx-dropdown">
                                <button class="mail-button-label toggle"><i class="zmdi zmdi-label"></i></button>
                                <ul class="adomx-dropdown-menu">
                                    <li><span>Label as:</span></li>
                                    <li>
                                        <hr>
                                    </li>
                                    <li class="checked"><a href="#"><i class="check"></i> Forwarded</a></li>
                                    <li><a href="#"><i class="check"></i> Replied</a></li>
                                    <li><a href="#"><i class="check"></i> Social</a></li>
                                    <li><a href="#"><i class="check"></i> Forums</a></li>
                                    <li><a href="#"><i class="check"></i> Promotions</a></li>
                                    <li>
                                        <hr>
                                    </li>
                                    <li><a href="#">Create New</a></li>
                                    <li><a href="#">Manage Labels</a></li>
                                </ul>
                            </div>
                            <div class="adomx-dropdown">
                                <button class="mail-button-more toggle"><i class="zmdi zmdi-more-vert"></i></button>
                                <ul class="adomx-dropdown-menu adomx-dropdown-menu-right">
                                    <li><a href="#">Mark all as read</a></li>
                                    <li><a href="#">Mark as read</a></li>
                                    <li><a href="#">Mark as unread</a></li>
                                    <li><a href="#">Mark as inportant</a></li>
                                    <li><a href="#">Mark as not inportant</a></li>
                                    <li><a href="#">Add to Tasks</a></li>
                                    <li><a href="#">Add Star</a></li>
                                    <li><a href="#">Filter messages like these</a></li>
                                    <li><a href="#">Mute</a></li>
                                </ul>
                            </div>
                        </div>


                    </div>
                    <!--Mail Options End-->

                    <!--Mail Start-->
                    <div class="single-mail">
                        <!--Top-->
                        <div class="top">
                            <!--Left-->
                            <div class="left">
                                <ul>
                                    <li><strong>From</strong> <span>uessicauensen@mail.com</span></li>
                                    <li><strong>To</strong> <span>admin@domain.com  (me)</span></li>
                                    <li><strong>CC</strong> <span>N/A</span></li>
                                </ul>
                            </div>
                            <!--Right-->
                            <div class="right">
                                <button><i class="zmdi zmdi-print"></i></button>
                                <button><i class="zmdi zmdi-tag-more"></i></button>
                            </div>
                        </div>
                        <!--Bottom-->
                        <div class="bottom">
                            <!--User Start-->
                            <div class="user">
                                <div class="image"><img src="assets/images/avatar/avatar-1.jpg" alt=""></div>
                                <div class="info">
                                    <h5 class="name">David Evans</h5>
                                    <span class="date">Sep 19, 2018, 3:46 PM</span>
                                </div>
                            </div>
                            <!--User End-->
                            <!--Body Start-->
                            <div class="body">

                                <div class="content">
                                    <h5>Hello Admin</h5>
                                    <p>We are oferring a 10% give away for all the new purcahses of our plugin. This offer is limited and valid till 24th September Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesettin</p>
                                    <ul>
                                        <li><a href="#">Lorem Ipsum has been the industry's standard dummy text.</a></li>
                                        <li><a href="#">Lorem Ipsum has been the industry's standard dummy text.</a></li>
                                    </ul>
                                </div>

                                <div class="attachment">
                                    <h5 class="title">Attachment:</h5>
                                    <ul class="attach-files">
                                        <li>
                                            <a href="#">
                                                <img src="assets/images/icons/doc.png" alt="">
                                                <span class="type">DOC</span>
                                                <i class="zmdi zmdi-cloud-download"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="assets/images/icons/pdf.png" alt="">
                                                <span class="type">PDF</span>
                                                <i class="zmdi zmdi-cloud-download"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="assets/images/icons/zip.png" alt="">
                                                <span class="type">ZIP</span>
                                                <i class="zmdi zmdi-cloud-download"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="assets/images/mail/attach-1.png" alt="">
                                                <span class="type">PNG</span>
                                                <i class="zmdi zmdi-cloud-download"></i>
                                            </a>
                                        </li>
                                    </ul>

                                    <a href="#" class="button button-primary button-round button-outline">Download zip</a>

                                </div>

                                <div class="buttons">
                                    <a href="#" class="button button-info button-round button-outline"><i class="zmdi zmdi-forward"></i>Forward</a>
                                    <a href="#" class="button button-primary button-round button-outline"><i class="zmdi zmdi-mail-reply"></i>Reply</a>
                                </div>

                            </div>
                            <!--Body End-->

                        </div>

                    </div>
                    <!--Mail End-->

                </div>
                <!--Mail List Container End-->

            </div>
            <!--Mail Wrapper Start-->

            <!-- Modal -->
            <div class="compose-mail-modal modal fade" id="modal-compose-mail">
                <div class="modal-dialog modal-dialog-centered modal-xl">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">New Message</h5>
                            <button type="button" class="close" data-dismiss="modal"><i class="zmdi zmdi-close"></i></button>
                        </div>

                        <div class="form">
                            <form action="#">
                                <div class="row">
                                    <div class="col-12 mb-30">
                                        <input class="form-control" type="email" placeholder="To">
                                    </div>
                                    <div class="col-12 mb-30">
                                        <input class="form-control" type="email" placeholder="Bcc">
                                    </div>
                                    <div class="col-12 mb-30">
                                        <textarea class="summernote"></textarea>
                                    </div>
                                    <div class="buttons-group col-12">
                                        <button type="button" class="button button-outline button-round button-warning"><i class="zmdi zmdi-attachment-alt"></i> Attach File</button>
                                        <button type="button" class="button button-outline button-round button-info">Save to Draft</button>
                                        <button type="button" class="button button-round button-primary">Send Mail</button>
                                    </div>

                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>

        </div><!-- Content Body End -->

        <!-- Footer Section Start -->
        <div class="footer-section">
            <div class="container-fluid">

                <div class="footer-copyright text-center">
                    <p class="text-body-light">2019 &copy; <a href="http://www.booTStrapmb.com">Codecarnival</a></p>
                </div>

            </div>
        </div><!-- Footer Section End -->

    </div>

    <!-- JS
============================================ -->

    <!-- Global Vendor, plugins & Activation JS -->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <!--Plugins JS-->
    <script src="assets/js/plugins/perfect-scrollbar.min.js"></script>
    <script src="assets/js/plugins/tippy4.min.js.js"></script>
    <!--Main JS-->
    <script src="assets/js/main.js"></script>

    <!-- Plugins & Activation JS For Only This Page -->
    <script src="assets/js/plugins/summernote/summernote-bs4.min.js"></script>
    <script src="assets/js/plugins/summernote/summernote.active.js"></script>

</body>

</html>